<script setup lang="ts">
import type { render } from 'vue'
import parse from '@rojer/katex-mini'
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// import htmlParser from '@/utils/'
// 定义 props 接收
const props = defineProps<{
  mathFormula: Array<string>
}>()
// const props = defineProps<{
//   mathFormula: string
// }>()
// const renderedLatex = ref<any[]>([])
let renderedLatex: any
// onLoad(async () => {
//   console.log('子组件未渲染前：', props.mathFormula)
// })
const renderLatex = (mathFormula: Array<string>) => {
  const regex = /\$(.*)\$/g
  for (let str of mathFormula) {
    console.log('每个mathFormula', str)
    if (regex.test(str) == true) {
      // console.log('是公式')
      str = str.replace(/\$/g, '')
      let children_item = parse(str, {
        displayMode: true,
        globalGroup: true,
        throwOnError: false,
      })
      console.log('是公式：', children_item)
      renderedLatex = children_item
    } else {
      console.log('不是公式')
      return str
    }
  }
  console.log('渲染后：', renderedLatex)
  return renderedLatex
}

// 参数为字符串类型
// const renderLatex = (mathFormula: string) => {
//   const regex = /\$(.*)\$/g
//   // console.log('每个mathFormula', mathFormula)
//   if (regex.test(mathFormula) == true) {
//     // mathFormula = mathFormula.replace(/\$\$/g, '')
//     // mathFormula = mathFormula.replace(/\\/g, '\\\\')
//     mathFormula = mathFormula.replace(/\$/g, `$$`)
//     let children_item = parse(mathFormula, {
//       displayMode: true,
//       globalGroup: true,
//       throwOnError: false,
//     })
//     renderedLatex = children_item
//     console.log('是公式：', renderedLatex)
//     return renderedLatex
//   } else {
//     console.log('不是公式：', mathFormula)
//     return mathFormula
//   }
// }
</script>

<template>
  <view class="body">
    <rich-text :nodes="renderLatex(props.mathFormula)" class="rich-text"></rich-text>
  </view>
</template>

<style lang="scss">
.body {
  display: flex;
  flex-flow: column nowrap;
  align-content: space-between;
  justify-items: flex-start;
}

.rich-text {
  text-align: left;
  width: auto;
  line-height: 30rpx;
}
</style>
